<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <link rel="stylesheet" type="text/css" href="./stylesheets/common.css">
    <link rel="stylesheet" type="text/css" href="./libs/videojs/video-js.min.css">
    <style>
        h5{
            color: #077cff;
        }
    </style>
</head>
<body>
<h2 align="center">视频加密原型图(HLS + NodeJS + FFmpeg) Demo —— 视频播放页面</h2>
<div class="player-container" id="player-container" align="center">
    <video id="my-video" class="video-js" width='600' height='300' controls>
      <!-- <source
        src='/encrypt/${getLocationSearch('movie')}/play'
        type="application/x-mpegURL"> -->
    </video>
</div>
</body>
<script src="./javascripts/jsencrypt.min.js"></script>
<script src="./libs/videojs/video-modify.js"></script>
<script>
  function findCookie(cookie){
    for (let item of document.cookie.split(';')) {
      const key = item.split('=')
      // 正则为去除字符串前后空格，被split的cookie可能是["name=liu", " path=wer/VRVR-029"]，path前有空格导致key[0]不匹配
      if (key[0] && key[0].replace(/(^[\s\n\t]+|[\s\n\t]+$)/g, "") === cookie) {
        return key[1] || ''
      }
    }
    return ''
  }

  // 获取公钥
  const getPublicPem = async function (){
    const publicPem = findCookie('a5261939975948b');
    if (publicPem) return publicPem;
    const res = await new Promise(function (reslove, reject){
      _createXHR({ uri: '/public', method: 'GET', callback: (err, result)=>{ reslove(result) } })
    });
    document.cookie = `a5261939975948b=${res.body};max-age=${60 * 60 * 24}`
    return res.body;
    // publicPemKey 就是解出来的公钥
    // let publicPemKey = ''
    // for (const item of res.body.split(',')) {
    //   publicPemKey += String.fromCharCode(item / 11)
    // }
  }
</script>
<script src="./javascripts/jquery.min.js"></script>

<!-- videojs-http-streaming.min 是 videojs-contrib-hls 的升级版，videojs-contrib-hls 官方已弃用 -->
<!-- 从 video.js 7开始 videojs-http-streaming.min 就默认包含在 videojs 里面了，所以不用再次引用 -->
<!-- <script src="./libs/videojs-http-streaming.min/videojs-http-streaming.min.js"></script> -->

<!-- <script src="./javascripts/encrypt/utils.js"></script> -->
<!-- <script src="./javascripts/encrypt/player.js"></script> -->
<script>
// 页面加载后触发
const ready = async function (){

}
</script>
<script>
  // 获取 url参数
  function getLocationSearch(key) {
    var url = location.search; //获取url中"?"符后的字串
    var theRequest = new Object();
    if (url.indexOf("?") != -1) {
    var str = url.substr(1);
    strs = str.split("&");
    for(var i = 0; i < strs.length; i ++) {
      theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
    }
    }
    return theRequest[key] || '';
  }
  // 手机不支持，因为会给 src 发送一个 get 请求，必须先用 videojs 初始化后，再给 src 地址
  // $("#player-container").append(`
  //   <video id="my-video" class="video-js" width='600' height='300' controls>
  //     <source
  //       src='/encrypt/${getLocationSearch('movie')}/play'
  //       type="application/x-mpegURL">
  //   </video>`)

  const myPlayer = videojs('my-video');

  // myPlayer.ready(function() {
    myPlayer.src({
      src: `/encrypt/${getLocationSearch('movie')}/play`,
      type: 'application/x-mpegURL'
    });
  //   // myPlayer.play();
  // });
  
  !async function (){
    $(document).ready(await ready());
  }()
</script>
</html>